<script setup lang="ts">
import {
    NButton, NModal, NFlex,
    NForm, NFormItem, NInput, NRadioGroup, NRadio
    , type FormInst, type FormItemRule
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type SysUserGroup } from '@/apis/models';
import { reactive, ref } from 'vue';
import { useMessage } from "naive-ui";

let message = useMessage();
let ruleFormRef = ref<FormInst>();
let emits = defineEmits(["handleQuery"])

let state = reactive({
    ruleForm: {} as SysUserGroup,
    showModal: false
})

let labelWidth = ref(110)
let userRroupRules = ref({
    fdCode: {
        required: true,
        validator(_: FormItemRule, value: string) {
            if (!value) {
                return new Error('请输入用户组编码')
            }
            let test = /^[a-zA-Z0-9._-]+$/;
            if (!test.test(value)) {
                return new Error('用户组编码格式为英文字母、数字，连接字符可用 .、_ 或 -。')
            }
            return true
        },
        trigger: "blur"
    },
    fdName: {
        required: true,
        message: "请输入用户组名称",
        trigger: "blur"
    }
})

import { useUserGroupStore } from "@/store/orgnization/userGroupStore";
let userGroupStore = useUserGroupStore()

let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {
            UpdateOne(userGroupStore, state.ruleForm).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    state.showModal = false;
                    closeDialog()
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}

let { UpdateOne } = useFeature()

function openDialog(row: any) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;
}

let closeDialog = () => {
    emits('handleQuery');
    state.showModal = false;
}

defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:54%;" title="添加用户组" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form require-mark-placement="left" ref="ruleFormRef" :rules="userRroupRules" :model="state.ruleForm"
                    :label-width="labelWidth" label-placement="left">
                    <n-form-item path="fdCode" label="用户组编码">
                        <n-input v-model:value="state.ruleForm.fdCode" placeholder="请输入用户组编码"></n-input>
                    </n-form-item>
                    <n-form-item path="fdName" label="用户组名称">
                        <n-input v-model:value="state.ruleForm.fdName" placeholder="请输入用户组名称"></n-input>
                    </n-form-item>
                    <n-form-item path="fdDescription" label="用户组描述">
                        <n-input type="textarea" v-model:value="state.ruleForm.fdDescription"
                            placeholder="请输入用户组的描述信息"></n-input>
                    </n-form-item>
                    <n-form-item label="用户组状态">
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="state.showModal = false">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped></style>
